<template>
	<view class="content">
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
		<view v-if="userInfo" class="user-info">
			<text class="welcome">欢迎您，{{userInfo.name}}同学</text>
			<text class="school">{{userInfo.schoolName}}</text>
			<view class="btn-group">
				<button @tap="handleManage" class="manage-btn">学校管理</button>
				<button @tap="handleLogout" class="logout-btn">退出登录</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '校园平台',
				userInfo: null
			}
		},
		onLoad() {
			this.checkLoginStatus()
		},
		onShow() {
			// 每次页面显示时检查登录状态
			this.checkLoginStatus()
		},
		methods: {
			checkLoginStatus() {
				const token = uni.getStorageSync('token')
				if (!token) {
					uni.navigateTo({
						url: '/subpages/login/index'
					})
					return
				}
				
				this.userInfo = uni.getStorageSync('userInfo')
			},
			handleManage() {
				uni.navigateTo({
					url: '/subpages/school_manage/index'
				})
			},
			handleLogout() {
				uni.showModal({
					title: '提示',
					content: '确定要退出登录吗？',
					success: (res) => {
						if (res.confirm) {
							uni.removeStorageSync('token')
							uni.removeStorageSync('userInfo')
							uni.navigateTo({
								url: '/subpages/login/index'
							})
						}
					}
				})
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
	
	.user-info {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 50rpx;
	}
	
	.welcome {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
	}
	
	.school {
		font-size: 28rpx;
		color: #666;
		margin-bottom: 30rpx;
	}
	
	.btn-group {
		display: flex;
		flex-direction: row;
	}
	
	.manage-btn, .logout-btn {
		width: 200rpx;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 8rpx;
		font-size: 28rpx;
		margin: 0 10rpx;
		margin-top: 30rpx;
	}
	
	.manage-btn {
		background-color: #007AFF;
		color: white;
	}
	
	.logout-btn {
		background-color: #e64340;
		color: white;
	}
</style>
